<template>
	<view class="content">
		<view class="setTiem">
			<view class="setTiem_l">
				<view>{{startTime}}</view>
				<view>----</view>
				<view>{{endTime}}</view>
			</view>
			<view class="setTiem_r">
				<uni-datetime-picker v-model="single">
					<image class="setTiemImg" src="https://txr001.zthj.net/qingdie/Icon_calendar_outlined%402x.png" mode=""></image>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="textList">
			<view class="textListItem">
				<view class="textListItem_t">
					<view>用电(KW/h)</view>
					<view>2900</view>
				</view>
				<view class="textListItem_b">
					<view>数据来源:自主填报</view>
					<view>更新时间:2023.12.23 12:09</view>
				</view>
				<view class="setHr"></view>
			</view>
			<view class="textListItem">
				<view class="textListItem_t">
					<view>用电(KW/h)</view>
					<view>2900</view>
				</view>
				<view class="textListItem_b">
					<view>数据来源:自主填报</view>
					<view>更新时间:2023.12.23 12:09</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startTime:"2022-12-01",
				endTime:"2023-12-07",
				single: "2021-04-3",
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style scoped lang="less">
	.content{
		width: 750rpx;
		height: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	.setTiem{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 30rpx;
		width: 686rpx;
		height: 60rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		padding: 0 20rpx;
		.setTiem_l{
			display: flex;
		}
		.setTiem_r{
			width: 32rpx;
			height: 32rpx;
			.setTiemImg{
				display: block;
				width: 100%;
				height: 32rpx;
			}
		}
	}
	.textList{
		width: 686rpx;
		height: auto;
		border-radius: 48rpx;
		background-color: #fff;
		box-sizing: border-box;
		.textListItem{
			padding: 10rpx 40rpx;
			.textListItem_t{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family:"PingFang SC";
				color: #333333;
				height: 40rpx;
				margin-bottom: 20rpx;
				>view:nth-child(1){
					font-size: 28rpx;
					font-weight: 400;
				}
				>view:nth-child(2){
					font-size: 30rpx;
					font-weight: 700;
				}
			}
			.textListItem_b{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				font-family: "PingFang SC";
				font-weight: 400;
				color: #9F9F9F;
				line-height: 23rpx;
			}
			.setHr{
				margin-top: 30rpx;
				width: 100%;
				height: 2rpx;
				background: #E6E6E6;
			}
		}
		.textListItem:first-child{
			padding-top: 30rpx !important;
		}
		.textListItem:last-child{
			padding-bottom: 30rpx !important;
		}
	}
</style>